WLX
Type
.wlx
in the first line of an input cell
It allows to use Wolfram Language XML in your cell. It comes handy when making a a complex cell structure or stylizing it using the power of HTML/CSS/JS.
Embed figures into a custom layout
Plot a figure into a symbol starting from the capital letter
Figure = Plot[Sinc[5x], {x,-5,5}]
then type in a new cell
.wlx
<div>
<style>
@keyframes tilt-shaking {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0eg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
</style>
<div style="animation: tilt-shaking 0.35s infinite">
<Figure/>
</div>
</div>
Then you plot will shake infinitely ;)
Making components
Let us define some hybrid WL function
.wlx
Heading[Text_, OptionPattern[]] := With[{color = OptionValue["Color"]},
<h2 style="color: {color}"><Text/></h2>;
]
Options[Heading] = {"Color"->"black"}
then we can use it in our layout
.wlx
<Heading Color={"blue"}>
Hello World!
</Heading>
tip
Utilize the power of WLX while making Slides
All WL expressions are accessible from there as well
.wlx
GetTime := TextString[Now]
<GetTime/>
Two-columns layout using Flexbox
You can fine-tune the layout, since you are dealing with pure HTML and CSS. For example, here we have a slider and a plot aligned to a row
.wlx
Module[{Slider = InputRange[0.1,1,0.1,0.5], Figure, lines},
EventHandler[Slider, Function[data, lines = {#, Sinc[#/data]}& /@ Range[-5,5,0.1]]];
Slider // EventFire;
Figure = Graphics[Line[lines // Offload], ImageSize->350];
<div style="display: flex">
<div><Slider/></div>
<div><Figure/></div>
</div>
]